<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="list"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="编号"
        width="50"
      />
      <el-table-column
        prop="adname"
        label="客户名称"
        width="180"
      />
      <el-table-column
        prop="product_line_name"
        label="产品线"
      />
      <el-table-column
        prop="money"
        label="金额"
      />
      <el-table-column
        prop="rebate"
        label="返点"
      />
      <el-table-column
        prop="dl_rebate"
        label="代理返点"
      />
      <el-table-column
        prop="show_money"
        label="显示金额"
      />
      <el-table-column
        label="提交人"
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="合同状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">
            <el-dropdown @command="changeContrcatStatus"
            >
            <span class="el-dropdown-link">
              正常<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'3,'+scope.row.id">归档</el-dropdown-item>
              <el-dropdown-item :command="'4,'+scope.row.id">到期</el-dropdown-item>
              <el-dropdown-item :command="'2,'+scope.row.id">作废</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>



          </span>
          <span v-else-if="scope.row.status == 2">
            作废
          </span>
          <span v-else-if="scope.row.status == 3">
            归档
          </span>
          <span v-else-if="scope.row.status == 4">
            到期
          </span>
        </template>

      </el-table-column>
      <el-table-column label="审核">
        <template slot-scope="scope">
         <Examine type="contract" :data="scope.row"></Examine>
        </template>
      </el-table-column>
      <el-table-column
        align="right"
      >
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
            @change="getList(1)"
          />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" round @click="handleOpen(scope.row)" ><svg-icon icon-class="clipboard" />  详情</el-button>
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="danger"-->
<!--            round-->
<!--            @click="handleDelete(scope.$index, scope.row)"-->
<!--          >Delete</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div class="filter-container" style="margin-top: 20px;">
      <el-pagination
        background
        :page-size="per_page"
        layout="prev, pager, next"
        :current-page="page"
        :total="total"
        @current-change="getList"
      />
    </div>


    <el-drawer title="合同详情" :visible.sync="drawer"  direction="rtl"   :before-close="beroreclose">
      <contractView :id="one" v-on:rfunc="ischange"></contractView>
    </el-drawer>

  </div>
</template>

<script>
import Resource from '@/api/resource';
import permission from '@/directive/permission';
import Examine from '@/components/CrmComponents/ListExamine.vue';
import contractView from '@/views/mcontract/info.vue';
const apiResource = new Resource('contract');
export default {
  name: 'List',
  directives: { permission },
  data() {
    return {
      list: [],
      loading: true,
      total: 0,
      per_page: 0,
      page: 1,
      search: '',
      drawer: false,
      one:'',
      r:0,
    };
  }, created() {
    this.getList();
  }, methods: {
    async getList(page){
      if(page>0) {
          this.page = page;
      }
      this.loading = true;

      const { data, meta } = await apiResource.list({ page: this.page, search: this.search, media: 2 });
      this.total = meta.total;
      this.per_page = meta.per_page;
      this.list = data;
      this.loading = false;
      this.drawer=false;
    },
    //查看信息详情
    handleOpen(res) {
        this.one=res.id;
        this.drawer=true;
    },
    //孙组件是否发生审核操作
    ischange(){
        this.r=1;
    },
    //关闭抽屉层
    beroreclose(){
        this.drawer=false;
        if (this.r==1){
            this.getList();
            this.r=0;
        }
    },
    //修改状态
        changeContrcatStatus(statusId){
            let datas = statusId.split(",");
            let status=datas[0];
            let id=datas[1];
        console.log(id);
        this.$confirm('确定要执行此操作吗？')
            .then(_ => {
                  apiResource.update(id,{status})
                      .then(response => {
                          this.$message({
                              message: '操作成功.',
                              type: 'success',
                              duration: 5 * 1000,
                          });
                          this.getList();
                      }).catch(error => {
                      console.log(error);
                  });

                done();
            })
            .catch(_ => {});
    }
  },
    components:{
        Examine,
        contractView
    }
};
</script>

<style scoped>

</style>
